<template>
  <div>
    <el-form>
      <!-- 发货模式 -->
      <el-form-item label="发货模式">
        <el-radio-group v-model="deliveryMode">
          <el-radio :label="1">现货首发</el-radio>
          <el-radio :label="2">预售</el-radio>
        </el-radio-group>
        <el-alert
          v-if="deliveryMode === 2"
          title="预售模式会影响客户对活动的选择，请谨慎设置。"
          type="warning"
          show-icon
        />
      </el-form-item>

      <!-- 可售时间 -->
      <el-form-item label="可售时间">
        <el-radio-group v-model="saleTimeType">
          <el-radio :label="1">营业全时段可售</el-radio>
          <el-radio :label="2">周期性可售</el-radio>
          <el-radio :label="3">指定时间可售</el-radio>
        </el-radio-group>

        <div v-if="saleTimeType === 2">
          <el-checkbox-group v-model="saleDays">
            <el-checkbox label="每天"></el-checkbox>
            <el-checkbox label="周一"></el-checkbox>
            <el-checkbox label="周二"></el-checkbox>
            <el-checkbox label="周三"></el-checkbox>
            <el-checkbox label="周四"></el-checkbox>
            <el-checkbox label="周五"></el-checkbox>
            <el-checkbox label="周六"></el-checkbox>
            <el-checkbox label="周日"></el-checkbox>
          </el-checkbox-group>
          <el-time-picker v-model="startTime" placeholder="开始时间" />
          <el-time-picker v-model="endTime" placeholder="结束时间" />
        </div>
      </el-form-item>
      <!-- 力荐 -->
      <el-form-item label="力荐标签">
        <el-switch v-model="forceRecommend" />
      </el-form-item>
      <!-- 商品属性 -->
      <el-form-item label="商品属性">
        <div v-for="(attr, index) in attributes" :key="index" class="attr-item">
          <el-input v-model="attr.name" placeholder="属性名称"></el-input>
          <el-input v-model="attr.value" placeholder="属性值"></el-input>
          <el-button type="danger" @click="removeAttribute(index)"
            >删除</el-button
          >
        </div>
        <el-button type="primary" @click="addAttribute">添加属性</el-button>
      </el-form-item>
      <!-- 上架下架 -->
      <el-form-item label="上下架状态">
        <el-radio-group v-model="status">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
   prop: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      deliveryMode: 1, // 1:现货首发, 2:预售
      saleTimeType: 1, // 1:全时段, 2:周期性, 3:指定时间
      saleDays: [], // 周期性可售的天数
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      forceRecommend: false, // 是否力荐
      attributes: [], // 商品属性数组
      status: 1, // 1:上架, 2:下架
    };
  },
  methods: {
    addAttribute() {
      this.attributes.push({ name: '', value: '' });
    },
    removeAttribute(index) {
      this.attributes.splice(index, 1);
    },
  },
};

</script>

<style>
/* 在此处添加自定义样式 */
</style>